<template>
  <div class="container-comment">
    <el-card>
      <div slot="header" class="clearfix">
        <my-bread>评论管理</my-bread>
      </div>
      <el-table
        v-loading="isLoading"
        :data="comment"
        style="width: 100%">
        <el-table-column
          prop="title"
          label="文章标题"
          width="180">
        </el-table-column>
        <el-table-column
          prop="total_comment_count"
          label="总评论数"
          width="180">
        </el-table-column>
        <el-table-column
          prop="fans_comment_count"
          label="粉丝评论数">
        </el-table-column>
        <el-table-column label="评论状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.comment_status">已打开</el-tag>
            <el-tag type="warning" v-else>已禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.comment_status" type="success"  @click="handleEdit(scope.$index, scope.row)">关闭评论</el-button>
            <el-button type="danger" v-else @click="handleEdit(scope.$index, scope.row)">打开评论</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        :page-size="10"
        layout="prev, pager, next"
        @current-change="hcurrentPage"
        :total="totalCount">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'comment',
  data () {
    return {
      isLoading: false,
      comment: [],
      // 总条数
      totalCount: 0,
      // 当前点击的页码
      currentPage: 1
      // 每页显示多少条数据
      // perpage: 20
    }
  },
  created () {
    this.loadComment()
  },
  methods: {
    async handleEdit (index, row) {
      this.isLoading = true
      console.log('row.....', index, row)
      const idStr = row.id.toString()
      const isComment = !row.comment_status
      // this.comment.comment_status = !this.row.comment_status
      // this.loadComment()
      const result = await this.$http({
        method: 'put',
        url: '/mp/v1_0/comments/status?article_id=' + idStr,
        // put请求，注意传参为data方式
        data: {
          // id: idStr
          allow_comment: isComment
        }
      })
      console.log(result)
      this.isLoading = false
      this.loadComment()
    },
    // 获取评论列表
    async loadComment () {
      const result = await this.$http({
        method: 'GET',
        url: '/mp/v1_0/articles',
        params: {
          response_type: 'comment',
          page: this.currentPage
        }
      })
      console.log('评论管理：', result)
      this.comment = result.data.data.results
      this.totalCount = result.data.data.total_count
    },
    hcurrentPage (newPage) {
      this.currentPage = newPage
      this.loadComment()
    }
  }
}
</script>

<style>

</style>
